<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='clock'></div>
    <script>
        window.onload = function () {
            const clockBox = document.querySelector('#clock');
            let html = timeNow();
            clockBox.innerHTML = html;
            function addZero(num) {
                return num >= 10 ? num : '0' + num;
            }
            function timeNow() {
                let time = new Date();
                // console.log(time);
                let Y = time.getFullYear();
                // console.log(Y);
                let M = addZero(time.getMonth() + 1);
                // console.log(M);
                let Day = addZero(time.getDate());
                // console.log(Day);
                let H = addZero(time.getHours());
                // console.log(H);
                let Min = addZero(time.getMinutes());
                // console.log(Min);
                let Sec = addZero(time.getSeconds());
                // console.log(Sec);
                // let now = time.toLocaleDateString();
                // console.log(now);
                // let nowTime = time.toLocaleString();
                // console.log(nowTime);
                let nowTime = `${Y}年${M}月${Day}日${H}时${Min}分${Sec}秒`
                return nowTime;
            }

            setInterval(function () {
                let html = timeNow();
                // console.log(html);
                clockBox.innerHTML = html;
            }, 1000)
        }
    </script>
</body>

</html>